<template>
  <div>
    <el-form :model="groupData" :rules="groupRules" ref="groupForm" label-position="right" label-width="80px">
      <el-form-item label="上级分类" v-if="groupData.parent_id!=='0'">
        <el-select v-model="groupData.parent_id" size="small" style="width:240px">
          <!--<el-option label="未选择" value="0"></el-option>-->
          <el-option v-for="item in groupParentData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品标题" prop="name">
        <el-input v-model="groupData.name" placeholder="请输入" size="small" style="width:240px"></el-input>
      </el-form-item>
      <el-form-item label="分类图标">
        <el-button type="primary" size="small" @click="isUploadImg = true; picType = 1">上 传</el-button>
      </el-form-item>
      <el-form-item label="" v-if="groupData.pic_url!==''">
        <l-pic
          :picurl="groupData.pic_url"
          :pickey="groupData.pic_url"
          :picdata="groupData.pic_url"
          :picmargin="'0'"
          :size="{ width:80, height:80 }"
          :disdel="false"
          :disview="false"/>
      </el-form-item>
      <el-form-item label="分类海报">
        <el-button type="primary" size="small" @click="isUploadImg = true; picType = 2">上 传</el-button>
      </el-form-item>
      <el-form-item label="" v-if="groupData.img_url!==''">
        <l-pic
          :picurl="groupData.img_url"
          :pickey="groupData.img_url"
          :picdata="groupData.img_url"
          :picmargin="'0'"
          :size="{ width:240, height:80 }"
          :disdel="false"
          :disview="false"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="groupData.status" active-color="#13ce66"></el-switch>
      </el-form-item>
      <el-form-item label="序号" prop="sort">
        <el-input v-model="groupData.sort" placeholder="请输入" size="small" style="width:240px"></el-input>
      </el-form-item>

      <div style="text-align:center">
        <el-button type="primary" size="small" @click="submit">提 交</el-button>
        <el-button size="small" @click="reset">重 置</el-button>
      </div>
    </el-form>

    <Modal v-model="isUploadImg" width="1128" :footer-hide="true" :zIndex="99999">
      <photo-album v-if="isUploadImg" :maxcount="1" @selectPicData="getPicData"/>
    </Modal>
  </div>
</template>

<script>
import mixin from '../mixin'
import store from '@/store'
import PhotoAlbum from '@/components/PhotoAlbum'
import LPic from '@/components/lPic'
import { postGoodsGroup, putGoodsGroup, getGoodsGroupParent } from '@/api/goods'

export default {
  name: 'add',
  mixins: [mixin],
  components: {
    PhotoAlbum,
    LPic
  },
  props: {
    groupData: {
      type: Object,
      required: false,
      default: () => {
        return {
          parent_id: '未选择',
          name: '',
          pic_url: '',
          img_url: '',
          status: true,
          sort: '',
          key: store.state.app.activeApp.saa_key
        }
      }
    },
    isAdd: {
      type: Boolean,
      required: true,
      default: true
    }
  },
  data() {
    return {
      isUploadImg: false,
      picType: 1,
      groupRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写商品标题' }],
        sort: [{ required: true, trigger: 'blur', message: '请填写排序' }]
      },
      groupParentData: []
    }
  },
  mounted(){
    this.getGoodsGroup();
    this.getGoodsGroupParent();
  },
  methods: {
    /**
     * 获取商品父分组
     */
    getGoodsGroupParent() {
      getGoodsGroupParent({ key: this.$store.state.app.activeApp.saa_key }).then(response => {
        if(response.status === 200){
          this.groupParentData = response.data;
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 图片选择成功回调
     */
    getPicData(data){
      this.isUploadImg = false;
      if(this.picType === 1){
        this.groupData.pic_url = data[0].pic_url;
      }else{
        this.groupData.img_url = data[0].pic_url;
      }
    },
    reset() {
      this.groupData = {
        parent_id: '未选择',
        name: '',
        pic_url: '',
        img_url: '',
        status: true,
        sort: '',
        key: store.state.app.activeApp.saa_key
      }
    },
    submit(){
      this.$refs.groupForm.validate(valid => {
        if(valid){
           this.groupData.status = this.groupData.status ? '1' : '0';
          if(this.isAdd){
            this.groupData.parent_id = this.groupData.parent_id == '未选择' ? 0 : this.groupData.parent_id
            postGoodsGroup(this.groupData).then(response => {
              if(response.status === 200){
                this.$message.success('添加成功！');
                this.getGoodsGroup();
                this.$emit('success');
              }else{
                this.$message.error(response.message);
              }
            })
          }else{
            const params = {
              id: this.groupData.id,
              parent_id: this.groupData.parent_id,
              name: this.groupData.name,
              pic_url: this.groupData.pic_url,
              img_url: this.groupData.img_url,
              status: this.getPicData.status,
              sort: this.groupData.sort,
              key: this.groupData.key
            } 
            putGoodsGroup(params).then(response => {
              if(response.status === 200){
                this.$message.success('修改成功');
                this.getGoodsGroup();
                this.$emit('success');
              }else{
                this.$message.error(response.message);
              }
            })
          }
        }
      })
    }
  },
}
</script>